var orders = Vue.extend({
    template: `<div>
                    <div class="col-md-10 mb-5">
                      <el-row>
                        <el-col :span="10"> 
                          <h2>总收入:{{total_income}}</h2>
                          <div v-for="item in order_price" :key="item.id">
                            <label for="validationDefault04">{{ payment_type[item.payment] }} : </label>
                            <span>{{ item.order_total_price_num }}</span>
                          </div>                       
                        </el-col>                
                      </el-row>
                      <el-divider></el-divider>
                      <el-row>     
                          <label for="validationDefault04">支付时间 : </label>
                          <el-date-picker
                            v-model="payment_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="支付开始时间">
                          </el-date-picker>---<el-date-picker
                            v-model="payment_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="支付结束时间">
                          </el-date-picker>
                          <label for="validationDefault04">状态 : </label>
                          <el-select v-model="order_status" placeholder="状态">
                            <el-option label="全部" value="0"></el-option>
                            <el-option label="成功" value="1"></el-option>
                            <el-option label="未成功" value="2"></el-option>
                            <el-option label="已退款" value="3"></el-option>
                          </el-select>
                          <el-button @click="handleSearch" type="success">筛选</el-button>
                          <el-button @click="handleResetSearch"type="primary">重置</el-button>
                                 
                      </el-row>
                    </div>
                    <el-table
                      :data="order_data"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="ordersn"
                        label="订单编号"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="machines_imel"
                        label="设备编号"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="goods"
                        label="商品名称"
                        >
                        <template slot-scope="scope">
                          <span v-if="scope.row.goodsid">{{scope.row.goods.goods_name}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="freightway_id"
                        label="货道编号">
                      </el-table-column>
                      <el-table-column
                        prop="goods_total_price"
                        label="商品单价">
                      </el-table-column>
                      <el-table-column
                        prop="order_total_price"
                        label="订单总价">
                      </el-table-column>
                      <el-table-column
                        prop="payment"
                        label="支付方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.payment == 1">微信</span>
                            <span v-if="scope.row.payment == 2">支付宝</span>
                        </template>
                      </el-table-column>                        
                      <el-table-column
                        prop="order_status"
                        label="订单状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.order_status == 0">未支付</span>
                                <span v-if="scope.row.order_status == 1">已支付</span>
                                <span v-if="scope.row.order_status == 2">已支付</span>
                                <span v-if="scope.row.order_status == 3">已支付</span>
                                <span v-if="scope.row.order_status == 4">已支付</span>
                                <span v-if="scope.row.order_status == 5">已支付</span>
                            </template>
                      </el-table-column>
                      <el-table-column
                        prop="fault"
                        label="出货状态">
                        <template slot-scope="scope">
                          <font v-if="scope.row.freight_status > 0" color="red" >{{scope.row.fault}}</font>
                          <font v-else >{{scope.row.fault}}</font>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="refund_status"
                        label="退款状态">
                        <template slot-scope="scope">
                                <span v-if="scope.row.refund_status == 0">未退款</span>
                                <span v-if="scope.row.refund_status == 1">等待退款</span>
                                <font v-if="scope.row.refund_status == 2" color="red">退款成功</font>
                            </template>
                      </el-table-column>
                      <el-table-column
                        prop="payment_time"
                        label="订单支付时间">
                      </el-table-column>
                    </el-table>                     
                    <el-pagination
                      background
                      :page-size="order_page_size"
                      layout="prev, pager, next"
                      :total="order_total"
                      :current-page.sync="order_current_page"
                      prev-text="上一页"
                      next-text="下一页"
                      @current-change="handleOrderCurrentChange">
                    </el-pagination>
                </div>
    `,
    props: {
        id: {
            type: String,
            require: true,
        },
        url: {
            type: String,
            require: true,
        }
    },
    data: function(){
        return {
            total_income:0,
            order_data: [],
            order_page_size:0,
            order_current_page:1,
            order_total:0,
            order_price:[],
            payment_type:['','微信','支付宝'],
            payment_start:'',
            payment_end:'',
            machine_id:'',
            order_status:'1',
        }
    },
    mounted: function(){
        this.get_orders();
    },
    watch:{
        id: function(){
            this.get_orders();
        },
        machine_id: function(){
            this.get_orders();
        }
    },
    methods: {
        get_orders(){
            var that = this;
            var params = '';
            if(that.payment_start != '' || that.payment_end != ''){
              params = {
                  params:{
                      id: that.id,
                      payment_start: that.payment_start,
                      payment_end: that.payment_end,
                      orders_status: that.order_status,
                      page:that.order_current_page,
                  }
              }
            }else{
              params = {
                  params:{
                      id: that.id,
                      orders_status:that.order_status,
                      page:that.order_current_page,
                  }
              }
            }
            axios.get(that.url,params).then(res => {
                var data = res.data.data;
                that.order_data = data.data;
                that.order_price = res.data.total_price;
                that.total_income = 0;
                that.order_price.forEach((item,index,array) => {
                  that.total_income = that.total_income + Number(item.order_total_price_num)
                })
                that.total_income = that.total_income.toFixed(2)
                that.order_total = data.total;
                that.order_page_size = data.per_page;
            });
        },
        handleOrderCurrentChange(page){
              this.order_current_page = page;
              this.get_orders();
            },
        handleSearch(){
          if(Date.parse(this.payment_start) > Date.parse(this.payment_end)){
            this.$message.error('支付开始时间不能大于结束时间');
            return;
          }
          this.get_orders();
        },
        handleResetSearch(){
          this.payment_start = '';
          this.payment_end = '';
          this.get_orders();
        }
    }
});
Vue.component('orders', orders);